<template>
  <card-layout title="储量概况" class="chart" bg="2">
    <div class="content" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.15)">
      <div id="reserves"></div>
    </div>
  </card-layout>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import * as echarts from 'echarts';
import { getMineReservesInfo } from "@/api/situation";
const { proxy } = getCurrentInstance();
let myChart
let option = {
  grid: {
    left: '5px',    // 左边距为0
    right: '5px',   // 右边距为0
    top: '30px',     // 上边距为0
    bottom: '0px',  // 下边距为0
    containLabel: true // 确保标签不会被遮挡
  },
  xAxis: {
    type: 'category',
    data: ['金矿', '银矿', '铁矿', '铜矿', '白云石', '石灰石', '方解石','砂石'],
    axisLabel: {
      margin: 10,
      fontSize: 12,
      width: 60,
      color: "#eef1fa",
      interval: 0,
      overflow: "breakAll",
    },
    axisLine: {
      lineStyle: {
        color: "rgba(82, 149, 100, 1)",
      },
    },
    axisTick: { show: false },
  },
  yAxis: {
    type: 'value',
    name: '单位：万吨',
    nameTextStyle: {
      fontSize: 12,
      color: "#eef1fa",
    },
    axisLabel: {
      fontSize: 10,
      color: "#eef1fa",
    },
    splitLine: {
      lineStyle: {
        color: "rgba(82, 149, 100, 0.7)",
        type: "dashed",
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "rgba(82, 149, 100, 1)",
      },
    },
  },
  series: [
    {
      data: [6.1, 4.2, 120, 200, 150, 80, 70, 130],
      type: 'bar',
      showBackground: true,
      label: {
        show: true,
        color: '#fff',
        position: 'top',
        fontSize: 10
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      }
    },
    {
      data: [6.1, 4.2, 120, 200, 150, 80, 70, 130],
      type: 'bar',
      showBackground: true,
      label: {
        show: true,
        color: '#fff',
        position: 'top',
        fontSize: 10
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#04c47d' },
          { offset: 1, color: '#04c47d' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#04c47d' },
            { offset: 0.7, color: '#04c47d' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      }
    }
  ]
}

onMounted(() => {
  mineReservesInfo()
});

// 获取矿山储量数据
function mineReservesInfo() {
  getMineReservesInfo().then(res=>{
    if (res.code == 200) {
      let xdata = []
      let dataList = []
      let totalDataList = []
      res.data.forEach(item=>{
        xdata.push(item.mineralName)
        dataList.push(item.remainReserves)
        totalDataList.push(item.totalReserves)
      })
      option.xAxis.data = xdata
      option.series[0].data = totalDataList
      option.series[1].data = dataList
      nextTick(()=>{
        myChart = echarts.init(document.getElementById("reserves"), null, {locale: 'ZH'});
        myChart.setOption(option, true)
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.chart {
  box-sizing: border-box;
  // flex: 1;
  .content {
    height: 240px;
  }
  #reserves {
    width: 100%;
    height: 220px;
  }
}
</style>
